<template>
  <!-- 客户材料 -->
  <div class="client-materials flx-column">
    <div class="tabs-wrap">
      <el-tabs v-model="currentType">
        <el-tab-pane
          :label="item.name"
          :name="item.id"
          v-for="(item, index) in tabsList"
          :key="index"
          @change="currentType = item.id"
        ></el-tab-pane>
      </el-tabs>
      <el-button class="position-btn" type="primary">新建材料</el-button>
    </div>

    <div class="flx-1">
      <ProTable ref="proTable" :columns="columns" :toolButton="false" :searchParam="state.formParams" :requestApi="getList">
        <!-- Expand -->
        <template #expand="scope">
          {{ scope.row }}
        </template>

        <!-- 领取日期自定义表头 -->
        <template #updateTimeHeader="scope">
          <span class="inline-block">
            <span class="flx-align-center">
              <span>{{ scope.column.label }}</span>
              <span class="flx-align-center ml-10">
                <el-icon @click.stop="handleClickCalendar"><Calendar /></el-icon>
                <el-date-picker
                  v-model="times"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  ref="timePick"
                  class="time-pick"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                >
                </el-date-picker>
              </span>
            </span>
          </span>
        </template>

        <!-- 图标 -->
        <template #icon>
          <el-image src="" fit="cover" style="width: 30px; height: 30px"></el-image>
        </template>

        <!-- 状态 -->
        <template #state>
          <el-tag type="success">已存</el-tag>
        </template>

        <!-- 操作 -->
        <template #operation>
          <el-button link type="primary">查看</el-button>
          <el-button link type="primary">编辑</el-button>
          <el-button link type="primary">复制</el-button>
          <el-button link type="danger" class="operation-delete">删除</el-button>
        </template>
      </ProTable>
    </div>
  </div>
</template>

<script lang="tsx" setup>
import { ref, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import Sortable from "sortablejs";

const currentType = ref(1);
const tabsList = [
  { id: 1, name: "商标注册" },
  { id: 2, name: "商标转让" },
  { id: 3, name: "商标变更" },
  { id: 4, name: "商标续展" }
];

// 获取申请人类型
const getTypeList = () => {
  return [
    { text: "A", value: "A" },
    { text: "B", value: "B" },
    { text: "C", value: "C" },
    { text: "D", value: "D" },
    { text: "E", value: "E" },
    { text: "F", value: "F" },
    { text: "G", value: "G" }
  ];
};

// ProTable 实例
const proTable = ref();

// 表格配置项
const columns = reactive([
  {
    prop: "username",
    label: "申请人",
    width: 148
  },
  {
    prop: "type",
    label: "申请人类型",
    minWidth: 119,
    filterMultiple: true,
    filters: getTypeList(),
    filterMethod: (value, row) => {
      return row.user.detail.age == value;
    }
  },
  {
    prop: "brandName",
    label: "商标名称",
    minWidth: 148
  },
  {
    prop: "icon",
    label: "图标",
    minWidth: 56
  },
  {
    prop: "updateTime",
    label: "更新时间",
    minWidth: 153,
    sortable: true
  },
  {
    prop: "latestFollowTime",
    label: "应用次数",
    minWidth: 110,
    sortable: true
  },
  {
    prop: "state",
    label: "状态",
    minWidth: 119
  },
  {
    prop: "operation",
    label: "操作",
    minWidth: 185,
    fixed: "right"
  }
]);

const state = reactive({
  formParams: {}
});

// 选择时间
const times = ref([]);
const timePick = ref();
const handleClickCalendar = () => {
  timePick.value.focus();
};

const getList = () => {
  return new Promise((resolve, reject) => {
    return resolve({
      data: {
        list: [{}]
      }
    });
  });
};
</script>

<style lang="scss" scoped>
.tabs-wrap {
  position: relative;

  .position-btn {
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>
